<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>相机锁定相机和飞行动画Cesium</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #cesiumContainer {
        width: 100vw;
        height: 100vh;
      }
      #cesiumContainer .cesium-viewer-bottom {
        /* 去除cesium logo */
        display: none;
      }
    </style>
    <link
      rel="stylesheet"
      href="../node_modules/cesium/Build/Cesium/Widgets/widgets.css"
    />
    <script src="../node_modules/cesium/Build/Cesium/Cesium.js"></script>
  </head>
  <body>
    <div id="cesiumContainer"></div>
    <script>
      console.log(`
        包依赖使用的是1.99的
        中文官网: https://www.vvpstk.com/public/Cesium/Documentation/createWorldTerrain.html
        `);
      console.log(Cesium);
      //   使用自己的密钥
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyY2RkZTQ4OS0wYzRlLTQyNmMtYmFjNy0zMzI3MWEwZmYwODIiLCJpZCI6MjMxODE5LCJpYXQiOjE3MjI0MTY0Mzh9.rRYOzcdNEqL45HmrFguJzNk2KCBb38afCpPyedi0bZ0";

      //   创建地图实例
      const viewer = new Cesium.Viewer("cesiumContainer", {});

      //   返回的是一个笛卡尔坐标
      const position = Cesium.Cartesian3.fromDegrees(110, 20, 20000); //经 纬 高度

      //   相机 setview通过定义相机目的地(方向),直接跳转到目的地
      //   viewer.camera.setView({
      //     destination: position,
      //     orientation: {
      //       //默认(0,-90,0)
      //       heading: Cesium.Math.toRadians(0),
      //       pitch: Cesium.Math.toRadians(-90),
      //       roll: Cesium.Math.toRadians(0),
      //     },
      //   });

      //   flyTo快速切换视角,带飞行动画,可以设置飞行的时长
      //   viewer.camera.flyTo({
      //     destination: position,
      //     orientation: {
      //       //默认(0,-90,0)
      //       heading: Cesium.Math.toRadians(0),
      //       pitch: Cesium.Math.toRadians(-90),
      //       roll: Cesium.Math.toRadians(0),
      //     },
      //     duration: 3, //单位秒
      //   });

      // lookAt将视角固定在设置的点位上,可以选择视角,但不能改变位置
      const position2 = Cesium.Cartesian3.fromDegrees(110, 20); //经 纬
      viewer.camera.lookAt(
        position2,
        new Cesium.HeadingPitchRange(
          Cesium.Math.toRadians(0),
          Cesium.Math.toRadians(-90),
          20000
        )
      );
    </script>
  </body>
</html>
